<template>
  <keep-alive>
    <div class="optimizationIndex-container ">
      <div class="content-container">
        <div class="itemContainer">
            <div class="">
                <span class="optimizationNameTitle" style="font-weight: bold">产品渠道优化</span>
                <p class="optimizationName" style="font-weight: bold"><span class="NumberColor">{{this.mineSetChannel.categoryNumber}}</span>个品类，<span>{{this.mineSetChannel.areaNumber}}</span>个产品型号的<span>{{this.mineSetChannel.skuNumber}}</span>个SKU在<span>{{this.mineSetChannel.cityNumber}}</span>个地区的<span>{{this.mineSetChannel.areaNumber}}</span>城市<span>{{this.mineSetChannel.shopNumber}}</span>个终端销售</p>
            </div>
        </div>
        <div class="itemContainer itemContainerMain boederSet">
          <div class="itemContainerPart boederSet">
            <div class="containerPartHeader">
              <div class="containerPart">
                <span>品类:</span>
                <el-select class="selectFont"  size="small" placeholder="选择类别" @change="changeCategory"
                           v-model="valueCategory" style="width: 156px;margin-right:30px">
                  <el-option class="selectFont" v-for="(item,index) in CatogetySet" :key="index"
                             :label="item" :value="item">
                  </el-option>
                </el-select>
                <el-radio-group @change="showByMonthChange" size="small" v-model="showByMonth">
                  <el-radio-button label="年"></el-radio-button>
                  <el-radio-button label="月"></el-radio-button>
                </el-radio-group>
                <el-select class="selectFont" size="small" placeholder="年份" v-model="mineNowYear"
                           @change="changeMineYear" style="width: 156px;">
                  <el-option  class="selectFont" v-for="item in mineYearSet" :key="item.value"
                             :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <el-select class="selectFont" size="small" v-show="showByMonth == '月'" v-model="mineNowMonth"
                           @change="changeMineMonth" placeholder="月份" style="width: 156px;">
                  <el-option class="selectFont"v-for="(item,index) in monthSolve" :key="index"
                             :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="containerPart">
                <el-button style="font-weight: bold" size="small" type="primary" @click="editProductSend(showEditProductTrue)">渠道配置产品</el-button>
                <el-button style="font-weight: bold" type="primary" size="small" @click="upProductSend(showUpProductTrue)">产品上架渠道</el-button>
              </div>
            </div>
            <div class="containerPart">
              <div class="titleHeader">销售类型指标完成情况</div>
            </div>
            <div class="containerPart">
              <div style="margin:20px 0;width:20%;display:inline-block;padding:20px 10px" v-for="(item,index) in saleStatus" :key="index">
                <div class="grid-content bg-purple" style="position: relative;">
                  <div class="Done" type="text" v-if="item.finishStatus === '完成'">{{item.finishStatus}}</div>
                  <div class="notDone" type="text" v-else>{{item.finishStatus}}</div>
                  <el-card class="box-card">
                    <div slot="header" class="clearfix ">
                      <span>{{item.salesType}}</span>
                    </div>
                    <p>销售量</p>
                    <p style="text-align:right">{{item.saleCount}}件</p>
                    <p>指标量</p>
                    <p style="text-align:right">{{item.finishSaleCount}}件</p>
                    <p>指标完成率</p>
                    <p style="text-align:right">
                      <span :style="{'color': item.finishRatio >= 100 ? '#05c459' :'#ff2354'}">{{item.finishRatio.toFixed(2)}}%</span>
                    </p>
                    <div class="CardText">
                      <el-button  type="text" style="color: #0099CC" @click="showProductInfo(item.salesType)">产品表现</el-button>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </div>
          <div class="itemContainerPart boederSet" style="margin: 12px 0px;">
            <div class="titleHeader">销售类型销售走势</div>
            <div id="saleSummaryChart" style="height: 300px;width:100%;"></div>
          </div>
          <div class="itemContainerPart boederSet">
            <div class="titleHeader">单品销售表现TOP10</div>
            <div class="tableContainer">
              <el-table :data="topSaleType" class="setHeight boederSet"
                        border stripe style="width: 100%;"
                        :default-sort="{prop: 'finishRatioString', order: 'descending'}">
                <el-table-column
                  type="index"
                  label="排名"
                  width="100"
                  >
                </el-table-column>
                <el-table-column
                  prop="productCode"
                  label="产品型号">
                </el-table-column>
                <el-table-column
                  prop="category"
                  label="所属品类">
                </el-table-column>
                <el-table-column
                  prop="salesType"
                  label="产品组合">
                </el-table-column>
                <el-table-column
                  prop="planAmount"
                  sortable
                  label="指标量(件)">
                </el-table-column>
                <el-table-column
                  prop="saleCount"
                  sortable
                  label="完成销售量(件)">
                </el-table-column>
                <el-table-column
                  prop="finishRatioString"
                  label="指标完成率"
                  :sort-method="sortSetByRatioString"
                  sortable>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="dialogVisibleDetail = true;fetchData(scope.row.productCode,'S',searchData)">销售详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <!--  Dialog容器  -->
      <div class="dialogContainer">
        <!--  Dialog详情  -->
        <div class="saleDetailDialog">
          <el-dialog :title="saleDataTitle" :visible.sync="saleDataTotalVisible"
            width="100%" top="8vh">
            <div class="whiteContainer boederSet">
              <div class="titleHeader">销售数据统计</div>
              <div class="paddingSet">
                <el-table :data="saleDataShow" class="setHeight boederSet"
                          border stripe style="width: 100%;">
                  <el-table-column
                    prop="productCode"
                    width="115"
                    label="产品型号">
                  </el-table-column>
                  <el-table-column
                    prop="category"
                    width="120"
                    label="所属品类">
                  </el-table-column>
                  <el-table-column
                    prop="saleAmount"
                    width="130"
                    sortable
                    :formatter="formatterPrice"
                    label="销售额(万元)">
                  </el-table-column>
                  <el-table-column
                    prop="saleCount"
                    width="125"
                    sortable
                    label="销售量(件)">
                  </el-table-column>
                  <el-table-column
                    prop="guidePrice"
                    width="135"
                    sortable
                    label="销售均价(元)">
                  </el-table-column>
                  <el-table-column
                    prop="saleCountBySaleTypeRatio"
                    width="180"
                    :sort-method="sortSetCountBySaleTypeRatio"
                    sortable
                    label="在销售类型销量占比">
                  </el-table-column>
                  <el-table-column
                    prop="saleAmountBySaleTypeRatio"
                    width="180"
                    :sort-method="sortSetAmountBySaleTypeRatio"
                    sortable
                    label="在销售类型销额占比">
                  </el-table-column>
                  <el-table-column
                    prop="saleCountByAllproductRatio"
                    width="165"
                    :sort-method="sortSetCountByAllRatio"
                    sortable
                    label="在全产品销量占比">
                  </el-table-column>
                  <el-table-column
                    prop="saleAmountByAllproductRatio"
                    width="165"
                    :sort-method="sortSetAmountByAllRatio"
                    sortable
                    label="在全产品销额占比">
                  </el-table-column>
                  <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text" @click="dialogVisibleDetail = true;fetchData(scope.row.productCode,'S',searchData)">销售详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-dialog>
        </div>
        <!--  Dialog产品分配到渠道  -->
        <div class="distrDialog dialogHeaderFont">
          <el-dialog title="产品分配到渠道" top="8vh" :visible.sync="showUpProductVisible" width="100%" >
            <div class="distrContainer space-between">
              <div class="distrItem boederSet whiteContainer" style="width: 37%;">
                <div class="titleHeader">产品列表</div>
                <div class="distrThisBody paddingSet">
                  <div class="searchContainer">
                    <div class="searchItem flex-container space-between" v-if="isUpMineShow">
                      <el-form :inline="true" :model="listSearchSet" size="small" class="demo-form-inline">
                        <el-form-item label="品牌">
                          <el-select class="selectFont" v-model="listSearchSet.brand" @change="brandProdChange" placeholder="品牌" style="width: 120px;">
                            <el-option class="selectFont" v-for="(item, index) in prodBrandList" :key="index" :label="item" :value="item"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="产品型号">
                          <el-select class="selectFont" v-model="listSearchSet.productCode" @change="prodCodeChange" placeholder="产品型号" style="width: 120px;">
                            <el-option class="selectFont" v-for="(item, index) in prodCodeList" :key="index" :label="item" :value="item"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-form>
                      <div>
                        <el-button size="small" type="text" @click="mineSwitchFn(0)">精确查询</el-button>
                      </div>
                    </div>
                    <div class="searchItem flex-container space-between" v-else>
                      <el-form :inline="true" :model="listSeaMine" size="small" class="demo-form-inline">
                        <el-form-item label="产品型号">
                          <el-input v-model="listSeaMine.productCode" placeholder="产品型号" style="width: 120px;"></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button size="small" type="primary" @click="getDistrProductSet(listSeaMine)">查 询</el-button>
                        </el-form-item>
                      </el-form>
                      <div>
                        <el-button size="small" type="text" @click="mineSwitchFn(1)">组合查找</el-button>
                      </div>
                    </div>
                  </div>
                  <div class="el-table" style="margin-top: 12px;min-height: 432px;">
                    <el-table highlight-current-row border ref="distrProdSet"
                              class="mineHeight" :data="distrProdList"
                               @current-change="distrProdCurrentChange" style="width: 100%;">
                      <el-table-column
                        type="index"
                        width="70"
                        label="序号">
                      </el-table-column>
                      <el-table-column
                        prop="productCode"
                        width="210"
                        label="产品型号">
                      </el-table-column>
                      <el-table-column
                        prop="category"
                        label="所属品类">
                      </el-table-column>
                    </el-table>
                  </div>
                  <div class="paginationSet">
                    <div class="pagination-container">
                      <div class="toStart" @click="handleCurDistrChange(1)">首页</div>
                      <el-pagination background :pager-count="5" @current-change="handleCurDistrChange"
                                     layout="prev, pager, next" :current-page.sync="seaDistrSet.currentPage" :total="seaDistrSet.totalRecord">
                      </el-pagination>
                    </div>
                  </div>
                </div>
              </div>
              <div class="distrItem boederSet" style="width: 62%;">
                <el-tabs type="border-card" v-model="distrActiveName">
                  <el-tab-pane label="线下渠道" name="distrUnLine">
                    <div class="distrItemLetf">
                      <div class="searchContainer">
                        <div class="searchItem" v-if="isRightUpSow">
                          <el-form :inline="true" :model="searchParamSet" size="small" class="demo-form-inline">
                            <el-form-item label="地区" style="margin-bottom: 12px;">
                              <el-select class="selectFont" v-model="searchParamSet.region" placeholder="地区" @change="regionSetChange" style="width: 140px;">
                                <el-option  class="selectFont"v-for="(item, index) in areaDisSet.region" :key="index" :label="item" :value="item"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label="省份" style="margin-bottom: 12px;">
                              <el-select class="selectFont" v-model="searchParamSet.province" placeholder="省份" @change="provinceSetChange" style="width: 140px;">
                                <el-option class="selectFont" v-for="(item, index) in areaDisSet.province" :key="index" :label="item" :value="item"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label="城市" style="margin-bottom: 12px;">
                              <el-select class="selectFont" v-model="searchParamSet.city" placeholder="城市" @change="citySetChange" style="width: 140px;">
                                <el-option class="selectFont" v-for="(item, index) in areaDisSet.citySet" :key="index" :label="item" :value="item"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label="上市状态" style="margin-bottom: 12px;">
                              <el-select class="selectFont" v-model="searchParamSet.isShelves" placeholder="上市状态" @change="shelveSetChange" style="width: 140px;">
                                <el-option class="selectFont" label="全部" value="全部"></el-option>
                                <el-option class="selectFont" label="已上架" value="已上架"></el-option>
                                <el-option class="selectFont" label="未上架" value="未上架"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label="渠道" style="margin-bottom: 12px;">
                              <el-select class="selectFont" v-model="searchParamSet.channelName" placeholder="渠道" @change="channelSetChange" style="width: 140px;">
                                <el-option  class="selectFont" v-for="(item, index) in distrChannelSet" :key="index" :label="item" :value="item"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item style="float: right;">
                              <el-button size="small" type="text" @click="mineSwitchFnThen(0)">精确查询</el-button>
                            </el-form-item>
                          </el-form>
                        </div>
                        <div class="searchItem flex-container space-between" style="margin-bottom: 12px;" v-else>
                          <el-form :inline="true" :model="seaParamDistrSet" size="small" class="demo-form-inline">
                            <el-form-item>
                              <el-select class="selectFont" v-model="seaParamDistrSet.searchType" placeholder="查询参数" style="width: 140px;">
                                <el-option class="selectFont" label="门店名称" value="shopName"></el-option>
                                <el-option class="selectFont" label="门店编号" value="shopNumber"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item>
                              <el-input v-model="seaParamDistrSet.searchParam" placeholder="输入查询参数" style="width: 140px;"></el-input>
                            </el-form-item>
                            <el-form-item>
                              <el-button size="small" type="primary" @click="distrSeaByShop(seaParamDistrSet)">查 询</el-button>
                            </el-form-item>
                          </el-form>
                          <div>
                            <el-button size="small" type="text" @click="mineSwitchFnThen(1)">组合查询</el-button>
                          </div>
                        </div>
                      </div>
                      <div class="el-table" style="min-height: 432px;">
                        <el-table class="setHeight" style="width: 100%;"
                                  border stripe :data="unLineDistrSet" ref="distrUnLineSet">
                          <el-table-column
                            type="index"
                            width="70"
                            label="序号">
                          </el-table-column>
                          <el-table-column
                            prop="shopNumber"
                            width="110"
                            label="门店编号">
                          </el-table-column>
                          <el-table-column
                            prop="shopName"
                            width="150"
                            label="门店名称">
                          </el-table-column>
                          <el-table-column
                            prop="city"
                            width="120"
                            label="所属城市">
                          </el-table-column>
                          <el-table-column
                            prop="province"
                            width="140"
                            label="所属省份">
                          </el-table-column>
                          <el-table-column
                            prop="channelName"
                            width="120"
                            label="所属渠道">
                          </el-table-column>
                          <el-table-column
                            prop="isShelves"
                            width="90"
                            label="上市状态">
                          </el-table-column>
                          <el-table-column
                            label="操作">
                            <template slot-scope="scope">
                              <el-button @click="updateShelveDistrSet(scope.row,false)" size="mini" type="text">{{scope.row.isShelves == '未上架' ? '上架' : '下架' }}</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                      <div class="paginationSet">
                        <div class="pagination-container">
                          <div class="toStart" @click="handleCurDistrUnChange(1)">首页</div>
                          <el-pagination background @current-change="handleCurDistrUnChange"
                            layout="prev, pager, next" :current-page.sync="seaDistrUnSet.currentPage" :total="seaDistrUnSet.totalRecord">
                          </el-pagination>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="线上渠道" name="distrOnLine">
                    <div class="distrItemLetf">
                      <div class="searchContainer">
                        <div class="searchItem">
                          <el-form :inline="true" :model="seaOnDistrParamSet" size="small" class="demo-form-inline">
                            <el-form-item label="渠道编号">
                              <el-input v-model="seaOnDistrParamSet.channelId" placeholder="渠道编号" style="width: 140px;"></el-input>
                            </el-form-item>
                            <el-form-item>
                              <el-button size="small" type="primary" @click="searchOnDistr(seaOnDistrParamSet)">查 询</el-button>
                            </el-form-item>
                          </el-form>
                        </div>
                      </div>
                      <div class="el-table" style="margin-top: 12px;min-height: 432px;">
                        <el-table class="setHeight" stripe border style="width: 100%;"
                                  ref="distrOnLineSet" :data="onLineDistrSet">
                          <el-table-column
                            type="index"
                            width="70"
                            label="序号">
                          </el-table-column>
                          <el-table-column
                            prop="channelId"
                            label="渠道编号">
                          </el-table-column>
                          <el-table-column
                            prop="channelName"
                            label="渠道名称">
                          </el-table-column>
                          <el-table-column
                            prop="isShelves"
                            label="上市状态">
                          </el-table-column>
                          <el-table-column
                            label="操作">
                            <template slot-scope="scope">
                              <el-button @click="updateShelveDistrSet(scope.row,true)" size="mini" type="text">{{scope.row.isShelves == '未上架' ? '上架' : '下架' }}</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                      <div class="paginationSet">
                        <div class="pagination-container">
                          <div class="toStart" @click="handleCurDistrOnChange(1)">首页</div>
                          <el-pagination background @current-change="handleCurDistrOnChange"
                            layout="prev, pager, next" :total="seaDistrOnSet.totalRecord" :current-page.sync="seaDistrOnSet.currentPage">
                          </el-pagination>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </el-dialog>
        </div>
        <!--  Dialog渠道上市产品  -->
        <div class="comeIntoDialog dialogHeaderFont">
          <el-dialog title="渠道上市产品" :visible.sync="showEditProductVisible" width="100%" top="8vh">
            <div class="comeIntoContainer space-between">
              <div class="comeIntoItem titleFont" style="width: 59%;">
                <el-tabs type="border-card" style="width: 100%;" v-model="marketActiveName">
                  <el-tab-pane name="marketUnLine" label="线下渠道">
                    <div class="comeIntoRight">
                      <div class="searchContainer">
                        <div class="searchItem flex-container space-between" style="margin-bottom: 12px;" v-if="isEditShow">
                          <el-form :inline="true" :model="searchParamUp" size="small" class="demo-form-inline">
                            <el-form-item label="地区">
                              <el-select class="selectFont" v-model="searchParamUp.region" @change="regionSetChange" placeholder="地区" style="width: 140px;">
                                <el-option class="selectFont" v-for="(item, index) in areaSet.region" :key="index" :label="item" :value="item"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label="省份">
                              <el-select class="selectFont" v-model="searchParamUp.province" @change="provinceSetChange" placeholder="省份" style="width: 140px;">
                                <el-option class="selectFont" v-for="(item, index) in areaSet.province" :key="index" :label="item" :value="item"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label="城市">
                              <el-select class="selectFont" v-model="searchParamUp.city" @change="citySetChange" placeholder="城市" style="width: 140px;">
                                <el-option class="selectFont" v-for="(item, index) in areaSet.citySet" :key="index" :label="item" :value="item"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label="渠道">
                              <el-select class="selectFont" v-model="searchParamUp.channelName" @change="channelSetChange" placeholder="渠道" style="width: 140px;">
                                <el-option class="selectFont" v-for="(item, index) in channelSet" :key="index" :label="item" :value="item"></el-option>
                              </el-select>
                            </el-form-item>
                          </el-form>
                          <div>
                            <el-button size="small" type="text" @click="mineSwitchFn(0,true)">精确查询</el-button>
                          </div>
                        </div>
                        <div class="searchItem flex-container space-between" style="margin-bottom: 12px;" v-else>
                          <el-form :inline="true" :model="searchUnParam" size="small" class="demo-form-inline">
                            <el-form-item>
                              <el-select class="selectFont" v-model="searchUnParam.searchType" placeholder="查询参数" style="width: 140px;">
                                <el-option class="selectFont" label="门店名称" value="shopName"></el-option>
                                <el-option class="selectFont" label="门店编号" value="shopNumber"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item>
                              <el-input v-model="searchUnParam.searchParam" placeholder="输入查询参数" style="width: 140px;"></el-input>
                            </el-form-item>
                            <el-form-item>
                              <el-button size="small" type="primary" @click="mineSearchUnline(searchUnParam)">查 询</el-button>
                            </el-form-item>
                          </el-form>
                          <div>
                            <el-button size="small" type="text" @click="mineSwitchFn(1,true)">组合查询</el-button>
                          </div>
                        </div>
                      </div>
                      <div class="el-table" style="min-height: 432px;">
                        <el-table border class="mineHeight" highlight-current-row
                          ref="marketUnLine" @current-change="comeIntoUnLineCurrentChange"
                          :data="dataSendUnLine"
                          style="width: 100%;">
                          <el-table-column
                            type="index"
                            width="70"
                            label="序号">
                          </el-table-column>
                          <el-table-column
                            prop="shopNumber"
                            width="120"
                            label="门店编号">
                          </el-table-column>
                          <el-table-column
                            prop="shopName"
                            label="门店名称">
                          </el-table-column>
                          <el-table-column
                            prop="city"
                            width="140"
                            label="所属城市">
                          </el-table-column>
                          <el-table-column
                            prop="province"
                            width="140"
                            label="所属省份">
                          </el-table-column>
                          <el-table-column
                            prop="channelName"
                            label="所属渠道">
                          </el-table-column>
                        </el-table>
                      </div>
                      <div class="paginationSet">
                        <div class="pagination-container">
                          <div class="toStart" @click="handleCurrentChange(1)">首页</div>
                          <el-pagination background @current-change="handleCurrentChange"
                            layout="prev, pager, next" :current-page.sync="seaParamUnSet.currentPage" :total="seaParamUnSet.totalRecord">
                          </el-pagination>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane name="marketOnLine" label="线上渠道">
                    <div class="comeIntoRight">
                      <div class="searchContainer">
                        <div class="searchItem" style="margin-bottom: 12px;">
                          <el-form :inline="true" :model="channelOnlineSea" size="small" class="demo-form-inline">
                            <el-form-item label="渠道编号">
                              <el-input v-model="channelOnlineSea.channelId" placeholder="渠道编号"></el-input>
                            </el-form-item>
                            <el-form-item>
                              <el-button size="small" @click="mineSearchOnline(channelOnlineSea)" type="primary">查 询</el-button>
                            </el-form-item>
                          </el-form>
                        </div>
                      </div>
                      <div class="el-table" style="min-height: 432px;">
                        <el-table border highlight-current-row
                          class="mineHeight" @current-change="comeIntoOnLineCurrentChange"
                          ref="marketOnLine" :data="dataSendOnLine"
                          style="width: 100%;">
                          <el-table-column
                            type="index"
                            width="70"
                            label="序号">
                          </el-table-column>
                          <el-table-column
                            prop="channelId"
                            label="渠道编号">
                          </el-table-column>
                          <el-table-column
                            prop="channelName"
                            label="渠道名称">
                          </el-table-column>
                        </el-table>
                      </div>
                      <div class="paginationSet">
                        <div class="pagination-container">
                          <div class="toStart" @click="handleCurrentChange(1)">首页</div>
                          <el-pagination background @current-change="handleCurrentChange"
                            layout="prev, pager, next" :current-page.sync="seaParamOnSet.currentPage" :total="seaParamOnSet.totalRecord">
                          </el-pagination>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
              <div class="comeIntoItem whiteContainer boederSet" style="width: 40%;flex-direction: column;">
                <div class="titleHeader">上市产品</div>
                <div class="thisUpContainer paddingSet">
                  <div class="searchContainer">
                    <div class="searchItem flex-container space-between" v-if="isRightEditSow" style="margin-bottom: 12px;">
                      <el-form :inline="true" :model="isShelveSeaSet" size="small" class="demo-form-inline">
                        <el-form-item label="品牌">
                          <el-select class="selectFont" v-model="isShelveSeaSet.brand" @change="shelveBrandChangeSet" placeholder="品牌" style="width: 140px;">
                            <el-option class="selectFont" v-for="(item, index) in prodBrandList" :key="index" :label="item" :value="item"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="上架状态">
                          <el-select class="selectFont" v-model="isShelveSeaSet.isShelves" @change="shelveThisChangeSet" placeholder="上架状态" style="width: 140px;">
                            <el-option class="selectFont" label="全部" value="全部"></el-option>
                            <el-option class="selectFont" label="已上架" value="已上架"></el-option>
                            <el-option class="selectFont" label="未上架" value="未上架"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-form>
                      <div>
                        <el-button size="small" type="text" @click="mineSwitchFnThen(0,true)">精确查询</el-button>
                      </div>
                    </div>
                    <div class="searchItem flex-container space-between" v-else style="margin-bottom: 12px;">
                      <el-form :inline="true" :model="restShelveSeaSet" size="small" class="demo-form-inline">
                        <el-form-item label="产品型号">
                          <el-input v-model="restShelveSeaSet.productCode" placeholder="产品型号"></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button size="small" type="primary" @click="restSearchShelve(restShelveSeaSet.productCode)">查 询</el-button>
                        </el-form-item>
                      </el-form>
                      <div>
                        <el-button size="small" type="text" @click="mineSwitchFnThen(1,true)">组合查询</el-button>
                      </div>
                    </div>
                  </div>
                  <div class="el-table" style="min-height: 432px;">
                    <el-table :data="isShelveSeaData" border class="setHeight" style="width: 100%;">
                      <el-table-column
                        type="index"
                        width="70"
                        label="序号">
                      </el-table-column>
                      <el-table-column
                        prop="productCode"
                        width="130"
                        label="产品型号">
                      </el-table-column>
                      <el-table-column
                        prop="category"
                        width="130"
                        label="所属品类">
                      </el-table-column>
                      <el-table-column
                        prop="isShelves"
                        width="130"
                        label="上架状态">
                      </el-table-column>
                      <el-table-column
                        label="操作">
                        <template slot-scope="scope">
                          <el-button @click="updateShelveSet(scope.row)" size="mini" type="text">{{scope.row.isShelves == '未上架' ? '上架' : '下架' }}</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div class="paginationSet" style="padding: 10px 0px;">
                    <div class="pagination-container">
                      <div class="toStart" @click="handleCurrentChangeUp(1)">首页</div>
                      <el-pagination background :pager-count="5" @current-change="handleCurrentChangeUp"
                                     layout="prev, pager, next" :current-page.sync="seaParamUpSet.currentPage" :total="seaParamUpSet.totalRecord">
                      </el-pagination>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-dialog>
        </div>
        <!--  Dialog产品销售详情  -->
        <div class="saleDetailDialog ">
          <el-dialog title="详细信息" top="8vh" class="saleMarketRight dialogHeaderFont" append-to-body :visible.sync="dialogVisibleDetail" width="100%">
            <div>
              <div class="itemContainer">
                <div class="itemTitle">销售情况</div>
                <div id="saleDetailSummaryChartS" style="height: 300px"></div>
              </div>
              <div class="itemContainer" style="margin-bottom: 0;">
                <div class="titleHeader space-between saleMarketRight">
                  <span style="font-weight: bold">销售渠道分布</span>
                  <el-form :inline="true" class="demo-form-inline single-form-inline locationDetail pickerOption" size="small">
                    <el-form-item  label="地区">
                      <el-select class="selectFont" v-model="country" placeholder="选择地区" @change="channelSel(searchData)">
                        <el-option class="selectFont" v-for="(item,index) in area" :key="index" :label="item" :value="item"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="省份">
                      <el-select class="selectFont" v-model="province" placeholder="选择省份" @change="channelSel(searchData)">
                        <el-option class="selectFont" v-for="(item,index) in provinceList" :key="index" :label="item" :value="item" ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item  label="城市">
                      <el-select class="selectFont" v-model="city" placeholder="选择城市" @change="channelSel(searchData)">
                        <el-option  class="selectFont" v-for="(item,index) in cityLists" :key="index" :label="item" :value="item" ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="门店">
                      <el-select class="selectFont" v-model="shop" placeholder="选择门店" @change="channelSel(searchData)">
                        <el-option class="selectFont" v-for="(item,index) in shopLists" :key="index" :label="item" :value="item" ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
                <div id="salePointChartS" style="height: 300px"></div>
              </div>
              <div v-if="shopIsAll" class="priceDetail">
                <div>
                  <div class="itemTitle">
                    <span>终端销售统计</span>
                  </div>
                  <el-table :data="priceTableData" style="width: 100%" size="mini">
                    <el-table-column
                      prop="shopName"
                      label="门店名称">
                    </el-table-column>
                    <el-table-column
                      sortable
                      prop="amountCount"
                      label="销售额(万元)">
                    </el-table-column>
                    <el-table-column
                      sortable
                      prop="salesCount"
                      label="销售量(万件)">
                    </el-table-column>
                    <el-table-column
                      prop="zhanBi"
                      sortable
                      label="销量在全品类中占比">
                    </el-table-column>
                  </el-table>
                </div>
                <div class="">
                  <div class="itemTitle">
                    <span>渠道表现趋势</span>
                  </div>
                  <div id="salePriceChartS" style="height: 300px"></div>
                </div>
              </div>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </keep-alive>
</template>

<script>
  import mixins from 'utils/mixin'
  import * as opreate from 'api/getData'
  import { monthSolve } from 'api/config'
  import { mineCreateYear, districtTotalSolve, dateSolveSet } from 'utils/mUtils'
  const { yearSet, monthSet } = dateSolveSet()
  const mineSetConst = {  region: '全部', province: '全部', city: '全部',
    channelName: '全部', isShelves: '全部', channelType: '线下' }

  export default {
    name: "optimizationIndex",
    data() {
      return {
        colors:['#FF5C9D','#FF950C','#6FC3F6','#29E6A5','#AAA5EA'],
        shopIsAll: true,
        monthSolve: monthSolve,
        mineYearSet: mineCreateYear(),
        showByMonth: '月',
        mineNowYear: yearSet,
        mineNowMonth: monthSet,
        valueCategory:'全部',
        topSaleType: [],
        shopSearchType: '1',
        shopSearchParam: '',
        CatogetySet: [],
        prodBrandList: [],
        prodCodeList: [],
        saleStatus: [],
        listSearchSet:{ productCode: '全部', brand: '全部' },
        searchUnParam: { searchType: 'shopName', searchParam: '' },
        listSeaMine: { productCode: '' },
        dataSendUnLine: [],
        distrProdList: [],
        dataSendOnLine: [],
        marketActiveName: 'marketUnLine',
        distrActiveName: 'distrUnLine',
        channelOnlineSea: { channelId: '' },
        isShelveSeaSet: { isShelves: '全部', brand: '全部' },
        isShelveSeaData: [],
        restShelveSeaSet:{ productCode: '' },
        isShelveSeaTemp: {},
        isShelveDistrTemp: {},
        saleDataTitle: '',
        saleDataShow: [],
        onLineDistrSet: [],
        unLineDistrSet: [],
        mineSetChannel: {},
        priceTableData: [],
        dialogVisibleDetail: false,
        isEditShow: true,
        isUpMineShow: true,
        isRightEditSow: true,
        isRightUpSow: true,
        showDeltailVisible: false,
        showEditProductVisible: false,
        showUpProductVisible: false,
        saleDataTotalVisible: false,
        showUpProductTrue: true,
        showEditProductTrue: true,
        areaSet: { region: [], province: [], citySet: [] },
        areaDisSet: { region: [], province: [], citySet: [] },
        channelSet: [],
        distrChannelSet: [],
        searchParamUp: {
          region: '全部', province: '全部', city: '全部', channelName: '全部'
        },
        seaParamUnSet: {  currentPage: 1, totalRecord: 1 },
        seaParamOnSet: {  currentPage: 1, totalRecord: 1 },
        seaParamUpSet: { currentPage: 1, totalRecord: 1 },
        seaDistrSet: { currentPage: 1, totalRecord: 1 },
        seaDistrOnSet: { currentPage: 1, totalRecord: 1 },
        seaDistrUnSet: { currentPage: 1, totalRecord: 1 },
        seaParamDistrSet: { searchType: 'shopName', searchParam: '', channelType: '线下' },
        searchParamSet: Object.assign({},mineSetConst),
        seaOnDistrParamSet: { channelId: '', channelType:"线上" }
      }
    },
    computed:{
      searchData:{
        set:function () {},
        get:function () {
          let tempSet = '年' == this.showByMonth
            ? { num: this.mineNowYear }
            : { num: 10, firstTime: `${this.mineNowYear}-${this.mineNowMonth}` }
          return tempSet
        }
      }
    },
    mixins:[mixins.mixin],
    mounted() {
      this.districtTotalSolve({},true)
      this.getShopChannel({},true)
      this.getCateInitSet()
      this.getProductCodeSet()
      this.initStateSetZero({"dateTime": `${this.mineNowYear}-${this.mineNowMonth}`, "category":"全部"},true)
    },
    methods: {
      formatterPrice(row, column){
        return parseFloat((row.saleAmount || 0)/10000).toFixed(2)
      },
      sortSetCountBySaleTypeRatio(prev,next){
        return prev.saleCountBySaleTypeRatio.slice(0,-1) - next.saleCountBySaleTypeRatio.slice(0,-1)
      },
      sortSetAmountBySaleTypeRatio(prev,next){
        return prev.saleAmountBySaleTypeRatio.slice(0,-1) - next.saleAmountBySaleTypeRatio.slice(0,-1)
      },
      sortSetCountByAllRatio(prev,next){
        return prev.saleCountByAllproductRatio.slice(0,-1) - next.saleCountByAllproductRatio.slice(0,-1)
      },
      sortSetAmountByAllRatio(prev,next){
        return prev.saleAmountByAllproductRatio.slice(0,-1) - next.saleAmountByAllproductRatio.slice(0,-1)
      },
      sortSetByRatioString(prev,next){
        return prev.finishRatio - next.finishRatio
      },
      getCateInitSet(){
        opreate.getHeaderInfoNumber().then(res => {
          this.mineSetChannel = res.data
        })
        opreate.getCateAll().then(res => {
          this.CatogetySet = res.data ?  ['全部', ...res.data] : []
        })
        opreate.getDistrBrandList().then(res => {
          let listBrand = res.data ? res.data.map( v => v.brandName) : []
          this.prodBrandList = listBrand.length > 0 ?  ['全部', ...listBrand] : []
        })
      },
      getProductCodeSet(param = {}){
        opreate.getProductCodeList({ flag: 0, ...param }).then(res => {
          this.prodCodeList = res.data ?  ['全部', ...res.data] : []
        })
      },
      getShopChannel(param = {},flag = false){
        opreate.getShopChannelData(param).then(res => {
          let tempSet = res.data ?  ['全部', ...res.data] : []
          if (flag){
            this.distrChannelSet = this.channelSet = tempSet
          }else {
            this.showEditProductVisible ? this.channelSet = tempSet : ""
            this.showUpProductVisible ? this.distrChannelSet = tempSet : ""
          }
        })
      },
      districtTotalSolve(param = {}, flag = false){
        districtTotalSolve(param,fn => {
          let { region, province, city } = fn
          if (flag){
            this.areaDisSet = this.areaSet = { region, province, citySet:city }
          }else {
            this.showEditProductVisible ? this.areaSet = { region, province, citySet:city } : ""
            this.showUpProductVisible ? this.areaDisSet = { region, province, citySet:city } : ""
          }
        })
      },
      initStateSetZero(param = {}, flag = false){
        this.getSaleTypeTop({ "sorts":"sortDesc", ...param })
        this.getSaleStatus(param)
        flag && this.getSaleTypePhoto(param)
      },
      changeCategory (category) {
        let dateSet = this.showByMonth == '年'? this.mineNowYear : `${this.mineNowYear}-${this.mineNowMonth}`
        this.initStateSetZero({ "dateTime": dateSet, "category": category },true)
      },
      changeMineYear(year){
        let dateSet = this.showByMonth == '年'? year : `${year}-${this.mineNowMonth}`
        this.initStateSetZero({ "dateTime": dateSet, "category": this.valueCategory },true)
      },
      changeMineMonth(month){
        this.initStateSetZero({ "dateTime": `${this.mineNowYear}-${month}`, "category": this.valueCategory })
      },
      showByMonthChange(flag){
        let tempSet = flag == '年' ? this.mineNowYear : `${this.mineNowYear}-${this.mineNowMonth}`
        this.initStateSetZero({ "dateTime": tempSet, "category": this.valueCategory },true)
      },
      getSaleStatus(param){
        opreate.getSaleTypeCount(param).then(res => {
          this.saleStatus = res.data || []
        })
      },
      getSaleTypePhoto(param){
        let { dateTime, category } = param
        let tempSet = dateTime.toString().split("-")
        dateTime = tempSet.length > 0 ? tempSet[0] : dateTime
        let monthSetMine = [`${dateTime}-01`,`${dateTime}-02`,`${dateTime}-03`,`${dateTime}-04`,`${dateTime}-05`,`${dateTime}-06`,`${dateTime}-07`,`${dateTime}-08`,`${dateTime}-09`,`${dateTime}-10`,`${dateTime}-11`,`${dateTime}-12`]
        opreate.getSaleTypePhoto({"dateTime":dateTime, "category":"全部"}).then(res => {
          let dataSetSum = this.mineSetSolve(res.data,res.data.length)
          this.reanderEcharts(dataSetSum,monthSetMine)
        })
      },
      mineSetSolve(paramSet = [], num = 5, dataSetSum = []){
        for (let idx = 0;idx < num; idx++ ){
          let dataSetA = {
            name: paramSet[idx].saleTypeName || '',
            type: 'line',
            smooth:true,
            lineStyle:{
              color:this.colors[idx]
            },
            data: paramSet[idx]
              ? paramSet[idx].list.map(v => {
                return { name: paramSet[idx].saleTypeName || '',  value: v.saleCount|| 0, planCount: v.planCount || 0, finishRatio:v.finishRatio || 0 }
              }) : []
          }
          dataSetSum.push(dataSetA)
        }
        return dataSetSum
      },
      reanderEcharts(paramSer = [],monthSetMine){
        let photoEchart = this.$echarts.init(document.getElementById('saleSummaryChart'))
        photoEchart.clear();
        let option = {
          legend: {
            data:paramSer.map(v => v.name),
            right:'20'
          },
          xAxis: {
            data: monthSetMine
          },
          tooltip:{
            show:true,
            trigger: 'axis',
            formatter(params) {
              let mineSet = `${params[0].axisValue}</br>`
              for (let item of params) {
                let { data } = item || {}
                mineSet += `${item.name} (销售量：${data.value}, 指标完成率：${data.finishRatio})</br>`
              }
              return `${mineSet}`;
            }
          },
          yAxis: {
            name: "销售量(件)",
            type: "value"
          },
          series: paramSer
        };
        photoEchart.setOption(option)
      },
      getSaleTypeTop(param){
        opreate.getSaleTypeTop(param).then(res => {
          this.topSaleType = res.data || []
        })
      },
      finishRatioString(rowSet){
        let tempSet = typeof parseFloat(rowSet.finishRatio) == 'number'
          ? (rowSet.finishRatio * 100).toFixed(2) : '0.00'
        return `${tempSet}%`
      },
      regionSetChange(region){
        this.districtTotalSolve({ region })
        this.getShopChannel({ region })
        let tempSet = { province: '全部', city: '全部', channelName: '全部', isShelves: '全部' }
        if(this.showEditProductVisible){
          this.searchParamUp = { ...this.searchParamUp,...tempSet }
          this.getSaleEditSend(this.searchParamUp)
        }else {
          this.searchParamSet = { ...this.searchParamSet, ...tempSet }
          this.getDistrShelveSet(this.searchParamSet)
        }
      },
      provinceSetChange(province){
        this.districtTotalSolve({ province })
        this.getShopChannel({ province })
        let tempSet = { city: '全部', channelName: '全部', isShelves: '全部' }
        if(this.showEditProductVisible){
          this.searchParamUp = { ...this.searchParamUp,...tempSet }
          this.getSaleEditSend(this.searchParamUp)
        }else {
          this.searchParamSet = { ...this.searchParamSet, ...tempSet }
          this.getDistrShelveSet(this.searchParamSet)
        }
      },
      citySetChange(city){
        this.districtTotalSolve({ city })
        this.getShopChannel({ city })
        let tempSet = { channelName: '全部', isShelves: '全部' }
        if(this.showEditProductVisible){
          this.searchParamUp = { ...this.searchParamUp,...tempSet }
          this.getSaleEditSend(this.searchParamUp)
        }else {
          this.searchParamSet = { ...this.searchParamSet, ...tempSet }
          this.getDistrShelveSet(this.searchParamSet)
        }
      },
      shelveSetChange(isShelves){
        let tempSet = { channelName: '全部' }
        this.searchParamSet = { ...this.searchParamSet, ...tempSet }
        this.getDistrShelveSet(this.searchParamSet)
      },
      channelSetChange(channelName){
        this.showEditProductVisible && this.getSaleEditSend(this.searchParamUp)
        this.showUpProductVisible && this.getDistrShelveSet(this.searchParamSet)
      },
      brandProdChange(brandName){
        this.listSearchSet.productCode = "全部"
        this.getProductCodeSet({ brandName })
        this.getDistrProductSet({ brand: brandName })
      },
      prodCodeChange(productCode){
        this.getDistrProductSet(this.listSearchSet)
      },
      mineSwitchFn(show, fn){
        if(fn){
          this.isEditShow = Boolean(show)
          Boolean(show) ? this.getSaleEditSend(this.searchParamUp) : this.mineSearchUnline(this.searchUnParam)
        }else {
          this.isUpMineShow = Boolean(show)
          Boolean(show) ? this.getDistrProductSet(this.listSearchSet) : this.getDistrProductSet(this.listSeaMine)
        }
      },
      mineSwitchFnThen(show, fn){
        if(fn){
          let { channelId, shopId } = this.isShelveSeaTemp
          this.isRightEditSow = Boolean(show)
          if(Boolean(show)){
            let searchSet = shopId ? { shopId, ...this.isShelveSeaSet } : { channelId, ...this.isShelveSeaSet }
            this.getDistrShelve(searchSet)
          }else {
            let searchSet = shopId ? { shopId, ...this.restShelveSeaSet } : { channelId, ...this.restShelveSeaSet }
            this.getDistrShelve(searchSet)
          }
        }else {
          this.isRightUpSow = Boolean(show)
          Boolean(show) ? this.getDistrShelveSet(this.searchParamSet) : this.distrSeaByShop(this.seaParamDistrSet)
        }
      },
      mineSearchUnline(param){
        let { searchType, searchParam, pageNumber } = param
        let searchThis =  'shopName' == searchType ? { pageNumber, shopName: searchParam } : { pageNumber, shopNumber: searchParam }
        this.getSaleEditSend(searchThis)
      },
      distrSeaByShop(param){
        let { searchType, searchParam, channelType, pageNumber } = param
        let searchThis =  'shopName' == searchType
          ? { channelType, pageNumber, shopName: searchParam }
          : { channelType, pageNumber, shopNumber: searchParam }
        this.getDistrShelveSet(searchThis)
      },
      searchOnDistr(param){
        this.getDistrShelveSet(param)
      },
      mineSearchOnline(param){
        let { channelId, pageNumber } = param
        opreate.getSaleOnlineSend({ channelId, pageNumber }).then(res => {
          let { list, totalRecord, currentPage } = res.data || {}
          this.seaParamOnSet = { currentPage, totalRecord }
          this.dataSendOnLine = list || []
          if(this.dataSendOnLine[0]){
            this.$nextTick(() => {
              this.$refs.marketOnLine && this.$refs.marketOnLine.setCurrentRow(this.dataSendOnLine[0])
            })
          }else {
            this.isShelveSeaData = []
          }
        })
      },
      getSaleEditSend(param = {},isVisible){
        opreate.getSaleUnlineSend(param).then(res => {
          let { list, currentPage, totalRecord } = res.data || {}
          this.dataSendUnLine = list|| []
          this.seaParamUnSet = { currentPage, totalRecord }
          isVisible ? this.showEditProductVisible = true : ''
          if(this.dataSendUnLine[0]){
            this.$nextTick(() => {
              this.$refs.marketUnLine && this.$refs.marketUnLine.setCurrentRow(this.dataSendUnLine[0])
            })
          }else {
            this.isShelveSeaData = []
          }
        })
      },
      upProductSend(fn){
        if(fn){
          this.showUpProductTrue = false
          this.getDistrProductSet({},true)
        }else {
          this.showUpProductVisible = true
        }
      },
      editProductSend(fn){
        if(fn){
          this.showEditProductTrue = false
          this.getSaleEditSend({},true)
        }else {
          this.showEditProductVisible = true
        }
      },
      updateShelveSet(row){
        let { channelId, shopId } = this.isShelveSeaTemp
        let { isShelves, productCode } = row
        let tempSet = shopId ? { shopId, productCode } : { channelId, productCode }
        this.updateShelveStatus(row, isShelves, tempSet)
      },
      updateShelveDistrSet(row,flag){
        let { productCode } = this.isShelveDistrTemp
        let { isShelves, channelId, shopId } = row
        let tempSet = Boolean(flag) ? { channelId, productCode } : { shopId, productCode }
        this.updateShelveStatus(row, isShelves, tempSet)
      },
      updateShelveStatus(row, isShelves, tempSet){
        if(isShelves == "未上架"){
          opreate.updateUpShelve(tempSet).then(res => {
            if("success"  == res.data){
              this.$message.success('操作成功')
              Object.assign(row,{ isShelves: '已上架' })
            }else {
              this.$message.error('错了哦，稍后再试')
            }
          })
        }else {
          opreate.deleteUpShelve(tempSet).then(res => {
            if("success"  == res.data){
              this.$message.success('操作成功')
              Object.assign(row,{ isShelves: '未上架' })
            }else {
              this.$message.error('错了哦，稍后再试')
            }
          })
        }
      },
      getDistrProductSet(param = {},isVisible) {
        opreate.getDistrProductList(param).then(res => {
          let { list, currentPage, totalRecord } = res.data || {}
          this.distrProdList = list|| []
          isVisible ? this.showUpProductVisible = true : ''
          this.seaDistrSet = { currentPage, totalRecord }
          if(this.distrProdList[0]){
            this.$nextTick(() => {
              this.$refs.distrProdSet && this.$refs.distrProdSet.setCurrentRow(this.distrProdList[0])
            })
          }else {
            this.isShelveSeaData = []
          }
        })
      },
      getDistrShelveSet(param = {}){
        let { productCode } = this.isShelveDistrTemp
        if(productCode){
          let { channelType } = param
          opreate.getDistrShelveList({ productCode, ...param }).then(res => {
            let { list, currentPage, totalRecord } = res.data || {}
            if("线下" == channelType){
              this.unLineDistrSet = list || []
              this.seaDistrUnSet = { currentPage,totalRecord }
            }else {
              this.onLineDistrSet = list || []
              this.seaDistrOnSet = { currentPage,totalRecord }
            }
          })
        }else {
          this.$message.error('错了哦，出现异常')
        }
      },
      getUpShelve(param = {}){
        opreate.getUpShelveList(param).then(res => {
          let { list, currentPage, totalRecord } = res.data || {}
          this.seaParamUpSet = { currentPage, totalRecord }
          this.isShelveSeaData = list|| []
        })
      },
      showProductInfo(saleType) {
        this.saleDataTitle = `${saleType}销售情况`
        opreate.getSaleTypeTop({ saleType, "defaultTime":"yearly" }).then(res => {
          this.saleDataShow = res.data || []
          this.saleDataTotalVisible = true
        })
      },
      shelveBrandChangeSet(brand){
        let { channelId, shopId } = this.isShelveSeaTemp
        this.isShelveSeaSet.isShelves = '全部'
        let searchSet = shopId ? { shopId, brand } : { channelId, brand }
        this.getUpShelve(searchSet)
      },
      shelveThisChangeSet(isShelves){
        let { channelId, shopId } = this.isShelveSeaTemp
        let searchSet = shopId ? { shopId, isShelves, brand: this.isShelveSeaSet.brand } : { channelId, isShelves, brand: this.isShelveSeaSet.brand }
        this.getUpShelve(searchSet)
      },
      restSearchShelve(productCode){
        let { channelId, shopId } = this.isShelveSeaTemp
        let searchSet = shopId ? { shopId, productCode } : { channelId, productCode }
        this.getUpShelve(searchSet)
      },
      comeIntoUnLineCurrentChange(row){
        row && this.setUnLineCurrentChange(row, 'marketUnLine', true)
      },
      comeIntoOnLineCurrentChange(row){
        row && this.setUnLineCurrentChange(row, 'marketOnLine', true)
      },
      setUnLineCurrentChange(row, reSet, fn){
        if(row){
          this.isRightEditSow = true
          this.restShelveSeaSet = { productCode: '' }
          this.isShelveSeaTemp = row
          let { channelId, shopId } = row
          let tempSet = this.isShelveSeaSet = { brand:"全部", isShelves: "全部" }
          let searchSet = shopId ? { shopId, ...tempSet } : { channelId, ...tempSet }
          this.getUpShelve(searchSet)
        }else {
          this.$message.error('错了哦，出现异常')
        }
      },
      handleCurrentChange(pageNumber){
        if('marketOnLine' == this.marketActiveName){
          this.mineSearchOnline({ pageNumber, ...this.channelOnlineSea })
        }else {
          if(Boolean(this.isEditShow)){
            this.getSaleEditSend({ pageNumber, ...this.searchParamUp })
          }else {
            this.mineSearchUnline({ pageNumber, ...this.searchUnParam })
          }
        }
      },
      handleCurrentChangeUp(pageNumber){
        let { channelId, shopId } = this.isShelveSeaTemp
        if(Boolean(this.isRightEditSow)){
          let searchSet = shopId ? { shopId, pageNumber,  ...this.isShelveSeaSet } : { channelId, pageNumber, ...this.isShelveSeaSet }
          this.getUpShelve(searchSet)
        }else {
          let searchSet = shopId ? { shopId, pageNumber, ...this.restShelveSeaSet } : { channelId, pageNumber, ...this.restShelveSeaSet }
          this.getUpShelve(searchSet)
        }
      },
      handleCurDistrChange(pageNumber){
        if(Boolean(this.isUpMineShow)){
          this.getDistrProductSet({ pageNumber, ...this.listSearchSet })
        }else {
          this.getDistrProductSet({ pageNumber, ...this.listSeaMine })
        }
      },
      distrProdCurrentChange(row){
        row && this.setDistrProdCurrentChange(row,true)
        this.seaOnDistrParamSet.channelId = ''
      },
      setDistrProdCurrentChange(row, fn){
        if(row){
          this.distrActiveName = 'distrUnLine'
          this.isRightUpSow = true
          this.isShelveDistrTemp = row
          this.searchParamSet = { ...mineSetConst }
          // fn ? "" : this.$refs.distrProdSet && this.$refs.distrProdSet.setCurrentRow(row)
          this.getDistrShelveSet(this.searchParamSet)
        }else {
          this.$message.error('错了哦，出现异常')
        }
      },
      handleCurDistrUnChange(pageNumber){
        if(Boolean(this.isRightUpSow)){
          this.getDistrShelveSet({ pageNumber, ...this.searchParamSet })
        }else {
          this.getDistrShelveSet({ pageNumber, ...this.seaParamDistrSet })
        }
      },
      handleCurDistrOnChange(pageNumber){
        this.searchOnDistr({ pageNumber, ...this.seaOnDistrParamSet })
      }
    },
    watch: {
      marketActiveName(newVal){
        this.isRightEditSow = true
        this.restShelveSeaSet = { productCode: '' }
        if('marketOnLine' == newVal){
          if(this.dataSendOnLine.length == 0){
            this.mineSearchOnline(this.channelOnlineSea)
          }else{
            this.setUnLineCurrentChange(this.dataSendOnLine[0],'marketOnLine')
          }
        }else {
          if(this.dataSendUnLine.length == 0){
            this.isShelveSeaData = []
          }else{
            this.setUnLineCurrentChange(this.dataSendUnLine[0],'marketUnLine')
          }
        }
      },
      distrActiveName(newVal){
        if("distrOnLine" == newVal){
          if(this.onLineDistrSet.length == 0){
            this.searchOnDistr(this.seaOnDistrParamSet)
          }
        }
      },
      isShelveDistrTemp(newVal){
        this.searchOnDistr(this.seaOnDistrParamSet)
      },
      shop(newVal){
        if("全部" == newVal){
          this.priceTableData = []
          this.shopIsAll = true
        }else {
          this.shopIsAll = false
        }
      }
    }
  }
</script>

<style scoped>

  .itemContainerMain{
    margin: 0px 12px;
    background: white;
    display: flex;
    flex-direction: column;
    padding: 12px;
  }
  .itemContainerPart{
    display: flex;
    flex-direction: column;
  }
  .itemContainer{
    background-color: #ffffff;
  }
  .itemContainer {
    background-color: white;
    padding: 10px 0;
    padding-bottom: 0;
    margin-bottom: 10px;
  }
  .itemTitle {
    background-color: #E8EEF4;
    height: 40px;
    padding: 0px 12px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
  }
  .containerPartHeader{
    display: flex;
    justify-content: space-between;
    height: 60px;
    align-items: center;
    padding: 0px 12px;
  }
  .containerPart span{
    font-weight: bold;
  }
  .tableContainer{
    padding: 12px;
  }
  .Done {
    float: right;
    padding: 3px 0px;
    width: 80px;
    height: 81px;
    background: #0099CC;
    line-height: 80px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    right: -14px;
    top: -14px;
    color: #fff
  }
  .notDone {
    float: right;
    padding: 3px 0px;
    width: 80px;
    height: 81px;
    background: #fec63c;
    line-height: 80px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    right: -14px;
    top: -14px;
    color: #fff
  }
  .CardText {
    text-align: center;
    border-top: 1px solid #e2e2e2;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 100%;
  }
  .optimizationName span{
    color: #fec63c;
    font-weight: bold;
  }
  .optimizationName {
    width: 100%;
    height: 45px;
    line-height: 55px;
    display: block;
    padding-left: 15px;
    background-color: #E8EEF4;
  }
  .optimizationNameTitle {
    width: 100%;
    height: 35px;
    line-height: 35px;
    display: block;
    padding-left: 15px;
    background-color: #fff;
  }
  .optimizationIndex-container{
    background: #E8EEF4;
  }
  .distrContainer, .comeIntoContainer{
    display: flex;
  }
  .distrItem, .comeIntoItem, .distrThisBody{
    display: flex;
  }
  .distrItem, .distrThisBody{
    flex-direction: column;
  }
  .distrItemLetf{
    display: flex;
    flex-direction: column;
  }
  .priceDetail {
    display: flex;
    background-color: #ffffff;
    padding: 10px;

  }
  .priceDetail >div{
    flex: 1;
    flex-basis: 50%;
    margin: 10px;
  }
  .titleHeader{
    font-weight: bold;
  }
</style>
